import Vue from "vue";
import App from "./App.vue";
// 1.引入路由
import VueRouter from "vue-router";
// 一级路由
import UI_Router from "./components/UI_Router.vue";
import Contacts from "./components/Contacts.vue";
import About from "./components/About.vue";
// 二级路由
import All_contacts from "./components/Contatcs/All_contacts.vue";
import Alice from "./components/Contatcs/Alice.vue";
import Bob from "./components/Contatcs/Bob.vue";
// 三级路由
import Blog from "./components/views/Blog.vue";
import Fax from "./components/views/Fax.vue";
Vue.config.productionTip = false;
// 2.全局注册
Vue.use(VueRouter);
// 3.定义路由规则
const routes = [
  {
    path: "/",
    component: UI_Router,
  },
  {
    path: "/UI_Router",
    component: UI_Router,
  },
  {
    path: "/contacts",
    component: Contacts,
    children: [
      {
        path: "All_contacts",
        component: All_contacts,
      },
      {
        path: "Alice",
        component: Alice,
      },
      {
        path: "Bob",
        component: Bob,
        children: [
          {
            path: "blog",
            component: Blog,
          },
          {
            path: "fax",
            component: Fax,
          },
        ],
      },
    ],
  },
  {
    path: "/about",
    component: About,
  },

];
// 4.创建路由实例
const router = new VueRouter({
  routes,
});
// 捕获冗余错误
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};
// 5.把实例挂载在全局
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");
